<template>
	<view class="big" @tap="detail">
		<view class="pick" v-for="(item, index) in salesList" :key="index" @click="hh({ id: index })">
			<picker
				mode="multiSelector"
				:data-id="item[0].option[index][item[2].idx[index]].id"
				data-index="index"
				@change="change"
				:value="item[0].option[index][idx[index]].id"
				:range="list"
				range-key="title"
			>
				<view class="picker">
					<text>你选择的药品种类：</text>
					<view class="picktext">
						<text v-text="item[0].option[0][item[2].idx[0]].title"></text>
						<text>/</text>
						<text v-text="item[0].option[1][item[2].idx[1]].title"></text>
						<text>/</text>
						<text v-text="item[0].option[2][item[2].idx[2]].title + '(' + manufactor + ')'"></text>
					</view>
				</view>
			</picker>
			<van-stepper class="stepper" v-model="item[1].quantity" input-width="30px" button-size="20px" @change="onChange" />
		</view>
		<van-icon name="add" class="icon" @click="addpick" />
	</view>
</template>

<script>
import { Chemistry, DrugName, Specifications, BoxNumber } from '@/api/api.js';
export default {
	data() {
		return {
			list: [],
			id: '',
			ids: '',
			spe_id: '',
			manufactor: '',
			yaopinList: [],
			quantity: '',
			salesList: [],
			new_arr: [],
			idss: 0
		};
	},
	onShow() {},
	mounted() {},
	methods: {
		detail() {
			let array = [];
			for (var i = 0; i < this.yaopinList.length; i++) {
				if (array.indexOf(this.yaopinList[i]) === -1) {
					array.push(this.yaopinList[i]);
				}
			}
			console.log(array);
			this.$emit('detai', this.yaopinList);
		},
		addpick() {
			this.getChemistry();
			var list = this.salesList;
			var options = this.list;
			list.push([{ option: options }, { quantity: 1, spe_id: '' }, { idx: [0, 0, 0] }]);
			this.salesList = list;
			let b = [];
			this.salesList.forEach((item, index) => {
				console.log(item, index, '-----------');
				console.log(item[1], item[1].spe_id, 'd');
				b.push({
					spe_id: item[1].spe_id,
					quantity: item[1].quantity
				});
				return b;
			});
			console.log(b, 'jjjjjj');
		},
		async getChemistry() {
			let res = await Chemistry();
			if (res.code == 200) {
				this.list.push(res.data);
				let {
					data: [{ id }]
				} = res;
				this.id = id;
				this.getDrugName();
			}
		},

		async getDrugName() {
			let res = await DrugName(this.id);
			if (res.code == 200) {
				this.list.push(res.data);
				let {
					data: [{ id }]
				} = res;
				this.ids = id;
				this.getSpecifications();
			}
		},
		async getSpecifications() {
			let res = await Specifications(this.ids);
			if (res.code == 200) {
				this.list.push(res.data);
				let {
					data: [{ id, manufactor }]
				} = res;
				this.manufactor = manufactor;
				this.salesList[this.idss][1].spe_id = id;
			}
		},
		hh(e) {
			this.idss = e.id;
		},
		change(e) {
			this.salesList[this.idss][2].idx = e.detail.value;
		},
		onChange(value) {
			uni.showToast({
				forbidClick: true
			});
			this.salesList[this.idss][1].quantity = value.detail;
		}
	}
};
</script>

<style scoped>
.picktext {
	font-size: 12px;
}
.pick {
	display: flex;
	justify-content: space-between;
}
.stepper {
	position: fixed;
	right: 5px;
	/* margin-top: 5%; */
}
.big {
	border-bottom: 1px solid #c1c1c1;
}
.icon {
	margin-left: 50%;
	transform: translate(-50%);
	margin-top: 5px;
}
</style>
